<template>
  <div id="page-yearplan">
    <h2>
      会员列表
      <Button type="success" class="fr" @click="showProtocol()">设置俱乐部会员协议</Button>
    </h2>

    <card>
      <Input v-model="query.realName" style="width:200px" placeholder="请输入会员姓名"></Input>
      <Select v-model="query.bdStatus" style="width:200px" placeholder="请选择绑定状态">
        <Option :value="''">不限</Option>
        <Option :value="'0'">已绑定</Option>
        <Option :value="'1'">未绑定</Option>
      </Select>
      <Select v-model="query.pkMemberTypeId" style="width:200px" placeholder="请选择会员类别">
        <Option :value="''" :key="-1">不限</Option>
        <Option v-for="item in typeList" :value="item.id" :key="item.id">{{ item.memberTypeName }}</Option>
      </Select>
      <Button type="primary" @click="search()">查询</Button>
    </card>

    <card class="mt10">
      <Table
        :columns="columns"
        :data="list"
        no-data-text="该查询条件没有任何数据"
        class="mt20">
      </Table>

      <div class="m10 clearfix" v-if="page.total > 0">
        <div class="fr">
          <Page
            show-total
            :total="page.total"
            :current="query.currentPage"
            @on-change="onChangePage">
          </Page>
        </div>
      </div>
    </card>

    <protocol-modal :form="protocol"></protocol-modal>
    <update-modal :form="updateModal" @submit="getList"></update-modal>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import vipApi from '@/api/vip'
  import updateModal from './components/list/update-modal'
  import protocolModal from './components/list/protocol-modal'

  export default {
    name: 'page-vip',
    components: {
      updateModal,
      protocolModal
    },
    data () {
      return {
        loading: false,
        query: {
          pkRcId: null,
          currentPage: 1,
          limit: 10
        },
        protocol: {
          visible: false
        },
        updateModal: {
          visible: false,
          data: {
          },
          template: {
          }
        },
        page: {
          total: 0
        },
        columns: [
          {
            title: '序号',
            align: 'center',
            width: 50,
            render: (h, params) => {
              return (this.query.currentPage - 1) * this.query.limit + params.row._index + 1
            }
          },
          {
            title: '姓名',
            align: 'center',
            width: 120,
            key: 'realName',
            render: (h, params) => {
              let { row } = params
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    marginLeft: '-10px'
                  },
                  on: {
                    click: () => {
                      this.$router.push({path: `/vip/member/${row.pkMemberInfo}`})
                    }
                  }
                }, row.realName)
              ])
            }
          },
          {
            title: '昵称',
            align: 'center',
            key: 'nickName'
          },
          {
            title: '性别',
            align: 'center',
            width: 100,
            render: (h, params) => {
              let { row } = params
              return row.sex === '1' ? '男' : '女'
            }
          },
          {
            title: '会员类型',
            align: 'center',
            width: 150,
            key: 'memberTypeName'
          },
          {
            title: '入会时间',
            align: 'center',
            key: 'addRcTime',
            render: (h, params) => {
              let { row } = params
              if (row.addRcTime) {
                return moment(row.addRcTime).format('YYYY-MM-DD')
              } else {
                return '-'
              }
            }
          },
          {
            title: '剩余积分',
            align: 'center',
            key: 'surplusScore',
            width: 120
          },
          {
            title: '总积分',
            align: 'center',
            key: 'totalScore',
            width: 120
          },
          {
            title: '微信绑定',
            align: 'center',
            key: 'bdStatus',
            width: 100,
            render: (h, params) => {
              let { row } = params
              if (row.bdStatus === '0') {
                return '已绑定'
              } else {
                return '未绑定'
              }
            }
          },
          {
            title: '操作',
            align: 'center',
            width: 100,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showUpdateModal(params.row)
                    }
                  }
                }, '修改级别')
              ])
            }
          }
        ],
        list: [],
        typeList: []
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      showProtocol () {
        this.protocol.visible = true
      },
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      async getTypeList () {
        const { body } = await vipApi.typeList({
          pkRcId: this.userInfo.pkRclubInfo
        })
        const { responseData } = body
        this.typeList = responseData
      },
      async getList () {
        this.loading = true
        this.query.pkRcId = this.userInfo.pkRclubInfo
        const { body } = await vipApi.memberList(this.query)
        const { responseData } = body
        this.loading = false
        this.list = responseData.content
        this.page.total = responseData.totalElements
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      showUpdateModal (detail) {
        this.updateModal.visible = true
        this.updateModal.data = Object.assign({}, detail)
      }
    },
    mounted () {
      this.$store.dispatch('getUserInfo')
      this.getTypeList()
      this.getList()
    }
  }
</script>

<style lang="less">
  #page-vip {
  }
</style>
